<template>
  <div class="login-container">
    <img class="bgPic" src="../../assets/img/login/login4/loginBlueBg.png" alt=""/>

    <div class="right-con" :style="{height:errorTime>=3?'29.615vw':'26.615vw'}">
      <div class="tit">
        {{ title }}
      </div>
      <div class="line-box"><span class="line"></span></div>
      <el-form
        ref="loginForm" :rules="loginRules" class="login-form" autocomplete="on"
        label-position="top"
        :model="loginForm"
        hide-required-asterisk
      >
        <el-form-item prop="username" class="label-box" >
          <el-input
            ref="username"
            v-model="loginForm.username"
            placeholder="请输入用户名"
            prefix-icon="User"
            name="username"
            type="text"
            tabindex="1"
            autocomplete="on"
            class="input-box"
          />
        </el-form-item>
        <el-form-item prop="password" class="label-box">

          <el-tooltip v-model="capsTooltip" content="大写键已打开" placement="left" trigger="focus">
            <el-input
              :key="passwordType"
              ref="password"
              v-model="loginForm.password"
              :type="passwordType"
              placeholder="请输入密码"
              prefix-icon="Lock"
              name="password"
              tabindex="2"
              autocomplete="on"
              @keyup="checkCapslock"
              @blur="capsTooltip = false"
              @keyup.enter="handleLogin"
            >
              <template #suffix>
                <svg-icon :icon-class="passwordType === 'password' ? 'ui-eye' : 'ui-hide'" color="gray" @click="showPwd"/>
              </template>
            </el-input>
          </el-tooltip>

        </el-form-item>
        <el-form-item v-if="errorTime >= 3" prop="identify" class="label-box">

          <el-row style="height: 60px">
            <el-col :span="10">
              <el-input
                ref="username"
                v-model="loginForm.identify"
                prefix-icon="Postcard"
                placeholder="验证码"
                name="identify"
                type="text"
                tabindex="3" />
            </el-col>
            <el-col :span="12" style=" margin-top: 0.521vw">
              <indentify ref="identify" :identify-code="identifyCode" :content-width="90" @click="makeCode" />
            </el-col>
          </el-row>
        </el-form-item>

        <el-button
          :loading="loading"
          class="login-btn"
          @click="handleLogin">
          登录
        </el-button>
      </el-form>
    </div>

  </div>
</template>
<script>
import { mixin } from './mixin'
export default {
  name: 'Login4',
  mixins: [mixin]
}
</script>
<style lang="scss" scoped>
.login-container{
  display: flex;
  align-items: center;
justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 150px;
  background: linear-gradient(to bottom, #3105b3, #1f82ee);

  .bgPic{
    width: 40.71vw;
    height: 28.615vw;
  }

    .right-con{
      box-sizing: border-box;
      width: 30vw;
      // margin-left: 203px;
      padding: 46px 70px ;
      background-color: #fff;
      border-radius: 20px;

      .tit {
        font-weight: 500;
        font-size: 32px;
        text-align: center;
      }

      .line-box{
        display: flex;
        justify-content: center;
        margin-bottom: 40px;

        .line{
          display: block;
          width: 46px;
          height: 10px;
          margin-top: 9px;
          background: #1762F2;
          border-radius: 5px;
        }
      }

      .el-form {
        position: relative;
        margin-right: 0;
        margin-left: 0;

        .login-btn{
          position: absolute;
          bottom: -10.5vh;
        }
      }

      .el-form--label-top .el-form-item :deep(.el-form-item__label)  {
        margin-bottom: 21px;
        color: #252631;
        font-weight: 600 !important;
        font-size: 24px !important;
        letter-spacing: 6px;
        // margin-top: 45px;
      }

      :deep(.el-input__icon svg) {
        width: 50px !important;
        height: 53px;
      }

      .icon{
        svg{
          width: 1.502vw !important;
          height: 1.719vw !important;
        }

      }

      .login-form {
        .label-box{
          margin-bottom: 2.343vw;
        }

        :deep(.el-button){
          width:22.396vw !important;
          height: 3.125vw;
          color: #FFF;
          font-weight: 600;
          font-size: 1.25vw;
          font-family: PingFangSC-Semibold, "PingFang SC";
          letter-spacing: 0.521vw;
          background:linear-gradient(to right, #018cfe, #4d3cfb) !important;
          border-radius: 2.083vw;
          box-shadow: 0 0 22px 0 rgb(23 98 242 / 21%);
        }

        :deep(.el-input__inner) {
          font-weight: 500;
          font-size: 1.042vw;
          font-family: PingFangSC-Medium, "PingFang SC";
          line-height: 1.458vw;
        }

        .el-form-item__content{
          .el-input{
            //width:22.396vw !important;
            height: 3.125vw;

            :deep(.el-input__wrapper){
              background-color: #f7f7f7;
              //border-radius: 40px !important;
              box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
            }
          }
        }

      }

    }

}
</style>
